<template>
  <div class="x-container">
    <div style="background-color: #fff;padding:20px 0 0 30px">
      <ul style="list-style:none">
        <li>
          <span class="serial active">1</span>
          <span>规划设计与实施方案编制单位选取方式</span>
          <el-form
            label-width="110px"
            style="margin-left: 56px;margin-top:30px"
            label-position="left"
            ref="formData_1"
            :model="formData"
            :rules="formDataRules"
          >
            <el-form-item label="选取方式" prop="pickMethod">
              <el-select
                style="width:220px"
                v-model="formData.pickMethod"
                :disabled="isCurrentProcess"
              >
                <el-option
                  v-for="(item, index) in pickMethodList"
                  :key="index"
                  :label="item.methodName"
                  :value="item.pickMethod"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="招标文件" v-show="formData.pickMethod == 1" prop="pickFileId">
              <el-upload
                :action="uploadUrl"
                :on-success="handleUploadSuccess"
                accept=".pdf"
                :disabled="isCurrentProcess"
                v-if="!isCurrentProcess"
                style="width:300px"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
              <div class="viewDocment" v-if="isCurrentProcess">
                <seeFujian
                  v-if="formData.pickFile"
                  @openPdf="seePdf"
                  :file-name="formData.pickFile | backFileName"
                  :file-url="formData.pickFile.filePath"
                />
                <!-- <span><i class="el-icon-document"/>{{formData.pickFile | backFileName}}</span>
                <a style="color: rgb(64, 158, 255);margin-left:5px" @click="seePdf(formData.pickFile.filePath,formData.pickFile.fileName)">查看</a>-->
              </div>
            </el-form-item>
            <el-form-item label="采购文件" v-show="formData.pickMethod == 2" prop="pickFileId">
              <el-upload
                :action="uploadUrl"
                :on-success="handleUploadSuccess"
                accept=".pdf"
                :disabled="isCurrentProcess"
                v-if="!isCurrentProcess"
                style="width:300px"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
              <div class="viewDocment" v-if="isCurrentProcess">
                <seeFujian
                  v-if="formData.pickFile"
                  @openPdf="seePdf"
                  :file-name="formData.pickFile | backFileName"
                  :file-url="formData.pickFile.filePath"
                />
                <!-- <span><i class="el-icon-document"/>{{formData.pickFile | backFileName}}</span>
                <a target="_blank" style="color: rgb(64, 158, 255);margin-left:5px" @click="seePdf(formData.pickFile.filePath,formData.pickFile.fileName)">查看</a>-->
              </div>
            </el-form-item>
            <el-form-item
              label="抽取公告"
              v-show="formData.pickMethod == 3"
              prop="pickFileId"
              :limit="1"
            >
              <el-upload
                :action="uploadUrl"
                :on-success="handleUploadSuccess"
                accept=".pdf"
                :disabled="isCurrentProcess"
                v-if="!isCurrentProcess"
                style="width:300px"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
              <div class="viewDocment" v-if="isCurrentProcess">
                <seeFujian
                  v-if="formData.pickFile"
                  @openPdf="seePdf"
                  :file-name="formData.pickFile | backFileName"
                  :file-url="formData.pickFile.filePath"
                />
                <!-- <span><i class="el-icon-document"/>{{formData.pickFile | backFileName}}</span>
                <a style="color: rgb(64, 158, 255);margin-left:5px" @click="seePdf(formData.pickFile.filePath,formData.pickFile.fileName)">查看</a>-->
              </div>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <span class="serial">2</span>
          <span>规划设计与实施方案编制单位名称</span>
          <el-form
            label-width="110px"
            style="margin-left: 56px;margin-top:30px"
            label-position="left"
            ref="formData_2"
            :model="formData"
            :rules="formDataRules"
          >
            <el-form-item label="选择单位/公司" prop="companyId">
              <el-select
                style="width:220px"
                v-model="formData.companyId"
                filterable
                :disabled="isCurrentProcess"
              >
                <el-option
                  v-for="item in companyList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="中标通知书" v-show="formData.pickMethod == 1" prop="notifyFileId">
              <el-upload
                :action="uploadUrl"
                :on-success="handleUploadSuccess1"
                accept=".pdf"
                :disabled="isCurrentProcess"
                v-if="!isCurrentProcess"
                style="width:300px"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
              <div class="viewDocment" v-if="isCurrentProcess">
                <seeFujian
                  v-if="formData.notifyFile"
                  @openPdf="seePdf"
                  :file-name="formData.notifyFile | backFileName"
                  :file-url="formData.notifyFile.filePath"
                />
                <!-- <span><i class="el-icon-document"/>{{formData.notifyFile | backFileName}}</span>
                <a style="color: rgb(64, 158, 255);margin-left:5px" @click="seePdf(formData.notifyFile.filePath,formData.notifyFile.fileName)">查看</a>-->
              </div>
            </el-form-item>
            <el-form-item label="中选/标通知书" v-show="formData.pickMethod == 2" prop="notifyFileId">
              <el-upload
                :action="uploadUrl"
                :on-success="handleUploadSuccess1"
                accept=".pdf"
                :disabled="isCurrentProcess"
                v-if="!isCurrentProcess"
                style="width:300px"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
              <div class="viewDocment" v-if="isCurrentProcess">
                <seeFujian
                  v-if="formData.notifyFile"
                  @openPdf="seePdf"
                  :file-name="formData.notifyFile | backFileName"
                  :file-url="formData.notifyFile.filePath"
                />
                <!-- <span><i class="el-icon-document"/>{{formData.notifyFile | backFileName}}</span>
                <a style="color: rgb(64, 158, 255);margin-left:5px" @click="seePdf(formData.notifyFile.filePath,formData.notifyFile.fileName)">查看</a>-->
              </div>
            </el-form-item>
            <el-form-item label="抽取结果公告" v-show="formData.pickMethod == 3" prop="notifyFileId">
              <el-upload
                :action="uploadUrl"
                :on-success="handleUploadSuccess1"
                accept=".pdf"
                :disabled="isCurrentProcess"
                v-if="!isCurrentProcess"
                style="width:300px"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
              <div class="viewDocment" v-if="isCurrentProcess">
                <seeFujian
                  v-if="formData.notifyFile"
                  @openPdf="seePdf"
                  :file-name="formData.notifyFile | backFileName"
                  :file-url="formData.notifyFile.filePath"
                />
                <!-- <span><i class="el-icon-document"/>{{formData.notifyFile | backFileName}}</span>
                <a style="color: rgb(64, 158, 255);margin-left:5px" @click="seePdf(formData.notifyFile.filePath,formData.notifyFile.fileName)">查看</a>-->
              </div>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <span class="serial">3</span>
          <span>合同信息</span>
          <el-form
            label-width="110px"
            style="margin-left: 56px;margin-top:30px"
            label-position="left"
            ref="formData_3"
            :model="formData"
            :rules="formDataRules"
          >
            <el-form-item label="已签订的合同" prop="contractFileId">
              <el-upload
                :action="uploadUrl"
                :on-success="handleUploadSuccess2"
                accept=".pdf"
                :disabled="isCurrentProcess"
                v-if="!isCurrentProcess"
                style="width:300px"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
              <div class="viewDocment" v-if="isCurrentProcess">
                <seeFujian
                  v-if="formData.contractFile"
                  @openPdf="seePdf"
                  :file-name="formData.contractFile | backFileName"
                  :file-url="formData.contractFile.filePath"
                />
                <!-- <span><i class="el-icon-document"/>{{formData.contractFile | backFileName}}</span>
                <a style="color: rgb(64, 158, 255);margin-left:5px" @click="seePdf(formData.contractFile.filePath,formData.contractFile.fileName)">查看</a>-->
              </div>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <span class="serial" style="visibility: hidden;"></span>
          <span>
            <el-button type="primary" @click="handleSubmit" v-if="!isCurrentProcess">提交</el-button>
            <el-button @click="$router.push('/projectManagement/planningStage/dealwith')">返回</el-button>
          </span>
        </li>
      </ul>
      <div style="height:50px"></div>
    </div>
    <el-dialog :close-on-click-modal="false" :title="pdfName" :visible.sync="pdfFlag" width="50%">
      <div class="pdfBox">
        <iframe :src="$https + pdfUrl" style="width:100%;height:600px;" frameborder="0"></iframe>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getDetail,
  saveData,
  getList,
  getCList
} from "@/api/plannDesignBudget/areaSelection.js";
import config from "@/config/index.js";
import { validateNotNull, validateUpload } from "@/utils/validate.js";
import seeFujian from "@/components/seeFujian";
export default {
  components: {
    seeFujian
  },
  data() {
    return {
      pdfUrl: "",
      pdfFlag: false,
      pdfName: "",
      projectId: localStorage.getItem("projectId") * 1,
      formData: {
        projectId: localStorage.getItem("projectId") * 1
      },
      baseUrl: config.baseUrl,
      uploadUrl: config.uploadUrl, //上传接口
      companyList: [], //企业列表数据
      pickMethodList: [], //选取方式列表数据
      formDataRules: {
        pickMethod: [{ validator: validateNotNull, trigger: "change" }],
        pickFileId: [{ validator: validateUpload, trigger: "blur" }],
        notifyFileId: [{ validator: validateUpload, trigger: "blur" }],
        contractFileId: [{ validator: validateUpload, trigger: "blur" }],
        companyId: [{ validator: validateNotNull, trigger: "change" }]
      } //表单规则验证
    };
  },
  computed: {
    isCurrentProcess: function() {
      let isTrue =
        localStorage.getItem("key") ==
        "PLANNING_DESIGN_AND_BUDGETING_DIST_SELECT";
      if (localStorage.getItem("lookStatus") == 2) {
        isTrue = false;
      }
      return !isTrue;
    }
  },
  filters: {
    backFileName: function(data) {
      if (data) {
        return data.fileName;
      } else {
        return "";
      }
    },
    backFilePath: (data, baseUrl) => {
      if (data) {
        return baseUrl + data.filePath;
      } else {
        return "";
      }
    }
  },
  methods: {
    //查看当前PDF
    seePdf(url, name) {
      this.pdfFlag = true;
      this.pdfUrl = url;
      this.pdfName = name;
    },
    getDetail() {
      //获取页面信息
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      getDetail({ projectId: this.projectId })
        .then(res => {
          loading.close();
          if (res.data) {
            this.formData = res.data;
          }
        })
        .catch(res => {
          loading.close();
        });
    },
    handleUploadSuccess: function(res, file, fileList) {
      //选取文件上传成功回调
      this.formData.pickFileId = res.data.id;
      this.$refs["formData_1"].validate();
    },
    handleUploadSuccess1: function(res, file, fileList) {
      //通知文件上传成功回调
      this.formData.notifyFileId = res.data.id;
      this.$refs["formData_2"].validate();
    },
    handleUploadSuccess2: function(res, file, fileList) {
      //合同文件上传成功回调
      this.formData.contractFileId = res.data.id;
      this.$refs["formData_3"].validate();
    },
    getList() {
      //获取选取方式列表
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      getList()
        .then(res => {
          loading.close();
          this.pickMethodList = res.data;
        })
        .catch(res => {
          loading.close();
        });
    },
    handleReset() {
      //重置
      this.formData = {
        projectId: this.projectId,
        pickMethod: "",
        pickFileId: "",
        companyId: "",
        notifyFileId: "",
        contractFileId: ""
      };
    },
    handleSubmit() {
      //提交表单
      var isTrue1 = false,
        isTrue2 = false,
        isTrue3 = false;
      this.$refs["formData_1"].validate(valid => {
        isTrue1 = valid;
      });
      this.$refs["formData_2"].validate(valid => {
        isTrue2 = valid;
      });
      this.$refs["formData_3"].validate(valid => {
        isTrue3 = valid;
      });
      if (isTrue1 && isTrue2 && isTrue3) {
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        saveData(this.formData)
          .then(res => {
            loading.close();
            this.$message({
              message: "提交成功！",
              type: "success"
            });
            this.$router.push("/projectManagement/planningStage/dealwith");
          })
          .catch(res => {
            loading.close();
          });
      }
    },
    getCList() {
      //获取公司列表
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      getCList({
        page: 0,
        size: 0
      })
        .then(res => {
          loading.close();
          this.companyList = res.data.rows;
        })
        .catch(res => {
          loading.close();
        });
    }
  },
  created() {
    this.getList();
    this.getCList();
    this.getDetail();
  }
};
</script>

<style scoped lang="scss">
.x-container {
  width: 100%;
  min-height: calc(100vh - 114px);
  padding: 20px;
  background: rgba(247, 248, 250, 1);
  .serial {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: rgba(46, 138, 230, 1);
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
    opacity: 0.4;
    font-size: 18px;
    font-family: Helvetica;
    color: rgba(255, 255, 255, 1);
    margin-right: 20px;
  }
  .serial.active {
    opacity: 1;
  }
  .serial + span {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 32px;
    color: rgba(51, 51, 51, 1);
  }
}
.upload-demo {
  width: 300px;
}
</style>